<template>
	<view class="notice">
		<view v-if="notice.length>0">
			<uni-swipe-action>
				<uni-swipe-action-item :options="delOptions" @click="deleteById(item)" :disabled="!item.read" v-for="(item,index) in notice"
				 :key="index">
					<view class="notice-box" @click="goDetail(item)">
						<image class="icon" src="../../static/icon/icon-notice.png" />
						<view style="width: 540upx;">
							<view class="notice-title">{{item.title}}</view>
							<view class="notice-time">发布时间: {{item.createTime}}</view>
						</view>
						<view>
							<view v-if="item.read" class="notice-tips-read">已读</view>
							<view v-else class="notice-tips-noread">未读</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
			<uni-load-more :status="loadingType" :contentText="contentText"></uni-load-more>
		</view>
		<view v-else class="tips">暂无更多公告</view>
	</view>
</template>

<script>
	import {
		post_md5
	} from '../../common/request'
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	var list = [],
		count = 0
	export default {
		components: {
			uniSwipeAction,
			uniSwipeActionItem
		},
		data() {
			return {
				notice: [],
				page: 1,
				loadingType: 'more', //定义加载方式 more---contentdown  loading---contentrefresh 2---contentnomore
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				delOptions: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				options: [{
					text: '删除',
					style: {
						backgroundColor: 'gray'
					}
				}]
			}
		},
		onShow() {
			this.getList()
		},
		onPullDownRefresh: function() {
			//下拉刷新的时候请求一次数据
			this.page = 1
			this.loadingType = 'more'
			this.notice = []
			this.getList()
		},
		onReachBottom: function() {
			this.getList()
		},
		methods: {
			deleteById(notice) {
				if (notice.read) {
					post_md5('/news-app/notice/del', {
						noticeId: notice.id,
						userId: uni.getStorageSync('userId')
					}).then(res => {
						if (res.code === 200) {
							let index = this.notice.findIndex(x => x.id === notice.id)
							if (index > -1) this.notice.splice(index, 1)
						}
					})
				}
			},
			getList() {
				if (this.loadingType !== 'more') {
					//loadingType!=0;直接返回
					return false
				}
				this.loadingType = 'loading'
				uni.showNavigationBarLoading() //显示加载动画
				const params = {
					userId: uni.getStorageSync('userId'),
					page: this.page
				}
				post_md5('/news-app/notice/page', params).then(res => {
					this.page++
					uni.stopPullDownRefresh()
					if (res.data.list.length > 0) {
						for (let i in res.data.list) {
							for (let j in list) {
								if (list[j] == res.data.list[i].id) {
									res.data.list[i].isChecked = true
									break
								} else {
									res.data.list[i].isChecked = false
								}
							}
							this.notice.push(res.data.list[i])
						}
						if (this.notice.length > 5) {
							this.loadingType = 'more'
						} else {
							this.loadingType = 'noMore'
						}
						uni.hideNavigationBarLoading() //关闭加载动画
					} else {
						this.loadingType = 'noMore'
						uni.hideNavigationBarLoading() //关闭加载动画
					}
				})
			},
			goDetail(item) {
				console.log(item)
				const params = {
					userId: uni.getStorageSync('userId'),
					noticeId: item.id
				}
				// 类型，1-详情，2-url，3-跳转模块
				post_md5('/news-app/notice/savehistory', params).then(res => {
					if (item.jumpType == 1) {
						uni.navigateTo({
							url: `/pages/notice/notice-detail?id=${item.id}`
						})
					}

					if (item.jumpType == 3) {
						if (item.params && item.isNeedParams == 1) {
							uni.navigateTo({
								url: item.modulePath + '?id=' + item.params
							})
						} else {
							switch (item.modulePath) {
								case '/pages/news/news':
									uni.switchTab({
										url: item.modulePath
									})
									uni.setStorageSync('notice', 1)
									break
								case '/pages/train/train':
									uni.navigateTo({
										url: item.modulePath
									})
									break
								case '/pages/topic/daily-topic?examType=4':
									const params = {
										userId: uni.getStorageSync('userId')
									}
									post_md5('/exam/isAnswerQuesOneADay', params).then(res => {
										if (res.data) {
											uni.showToast({
												title: '今日已完成，请明日再试',
												icon: 'none'
											})
										} else {
											uni.navigateTo({
												url: item.modulePath
											})
										}
									})
									break
								default:
									uni.navigateTo({
										url: item.modulePath
									})
									break
							}
						}
					}

					setTimeout(function() {
						item.read = true
					}, 1e3)
				})
			}
		}
	}
</script>

<style>
	.notice {
		width: 100%;
		overflow-x: hidden;
	}

	.notice-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #ffffff;
		padding: 40upx 30upx;
		border-bottom: 1px solid #eee;
		width: 100%;
	}

	.icon {
		width: 60upx;
		height: 60upx;
		margin-right: 20upx;
	}

	.notice-title {
		font-size: 30upx;
		color: #333333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.notice-time {
		font-size: 24upx;
		color: #999999;
		margin-top: 18upx;
	}

	.notice-tips-read {
		white-space: nowrap;
		font-size: 24upx;
		color: #999999;
	}

	.notice-tips-noread {
		white-space: nowrap;
		font-size: 24upx;
		color: #ec6663;
	}

	.tips {
		color: #999999;
		text-align: center;
		margin-top: 100upx;
	}
</style>
